<template>
  <div class="tab_control_box">
    <div class="tab_control">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="实时监测" name="1">
          <EnvirSurvey class="content-item" ref="EnvirSurveyRef" :bidSection="bidSection" />
        </el-tab-pane>
        <el-tab-pane label="设备列表" name="2">
          <DeviceList class="content-item" ref="DeviceListRef" @showDailog="addDeviceInfo" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="button_box">
      <el-row>
        <el-button type="text" plain icon="el-icon-refresh" @click="refreshData">刷新</el-button>
        <el-button type="text" plain :icon="icon" @click="addDeviceInfo" v-show="activeName == 2">添加设备</el-button>
      </el-row>
    </div>

    <AddDeviceInfo ref="AddDeviceInfoRef" />
  </div>
</template>

<script>
  import EnvirSurvey from "./environment/EnvirSurvey";
  import DeviceList from "./environment/DeviceList";
  import AddDeviceInfo from "./environment/model/AddDeviceInfo";
  import HttpInterface from "../../util/httpInterface";
  import { mapActions } from "vuex";

  export default {
    name: "EnvironmentMonitor",
    components: {
      EnvirSurvey, DeviceList, AddDeviceInfo
    },
    data() {
      return {
        activeName: "1",
        bidSection: "",
        icon: "el-icon-circle-plus-outline"
      }
    },

    mounted(){
      let _this = this;
      HttpInterface.getUserInfo(() => {
        this.getTendersInfo((data) => {
          _this.bidSection = data[0].id + "";
        });
        this.getWorkAreaInfo();
      })
    },

    methods: {
      ...mapActions(["getTendersInfo", "getWorkAreaInfo"]),

      handleClick() {
        switch (this.activeName) {
          case '1':
            this.$refs.EnvirSurveyRef.getDeviceInfo();
            break;
          case "2":
            this.$refs.DeviceListRef.getDeviceList();
            break;
        }
      },

      refreshData() {
        this.handleClick();
      },

      addDeviceInfo(id) {
        if (id > 0) {
          this.$refs.AddDeviceInfoRef.show(id);
        } else {
          this.$refs.AddDeviceInfoRef.show();
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.content-item{
  padding: 20px;
}
</style>
